<template>
  <div class="tapStyle secondary-page-mode" id="print_content">
     <div class="secondary-toolbar">
          <span>姓名/角色/账号 : </span>&nbsp;
          <div class="layoutBox" style="width:242px">
              <el-input v-model="input" placeholder="请输入"></el-input>
          </div>&emsp;&emsp;
          <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
          <el-button type="delet"  @click="visiDialogadd=true"><i class="iconfont icon-tianjia"></i>新增</el-button>
     </div>
     <div class="currency-mode-wrap">
          <el-table
              :data="tableData"
              border
              style="height:100%">
              <el-table-column
                type="index"
                :index="indexMethod"
                width="50">
              </el-table-column>
              <el-table-column
                prop="date"
                label="账号">
              </el-table-column>
              <el-table-column
                prop="person"
                label="姓名">
              </el-table-column>
               <el-table-column
                prop="name"
                label="单位">
              </el-table-column>
               <el-table-column
                prop="name"
                label="角色">
              </el-table-column>
               <el-table-column
                prop="name"
                label="身份证号">
              </el-table-column>
              <el-table-column
                prop="name"
                label="手机号">
              </el-table-column>
               <el-table-column
                prop="name"
                label="性别">
              </el-table-column>
               <el-table-column
                prop="name"
                label="是否启用">
              </el-table-column>
               <el-table-column
                prop="name"
                label="是否提交">
              </el-table-column>
              <el-table-column
              width="190"
                label="操作">
                    <template>
                      <div style="text-align:center">
                            <el-button type="secondBtn" @click="visiDialogadd=true">编辑</el-button>
                            <el-button type="secondBtn" @click="visiDialog=true">分配站点</el-button>
                      </div>
                    </template>
              </el-table-column>
          </el-table>
     </div>
    <el-dialog :visible.sync="visiDialog"  width="1000px" title="分配站点" :before-close="closess">
       <div class="dialogcontent">
            <div class="secondary-toolbar" style="border:0px">
                 <span>所属行政区：</span>&nbsp;
                 <div class="layoutBox" style="width:122px">
                   <yf-dropdowntree :treeData='treedata' :treeConfig='treeConfig'></yf-dropdowntree>
                 </div>
                  <span>所属流域：</span>&nbsp;
                 <div class="layoutBox" style="width:122px">
                   <yf-dropdowntree :treeData='treedata' :treeConfig='treeConfig'></yf-dropdowntree>
                 </div>
                 <span>站点名称/编号： </span>&nbsp;
                 <div class="layoutBox" style="width:120px">
                     <el-input v-model="input" placeholder="请输入"></el-input>
                 </div>&emsp;&emsp;
                 <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
                 <el-button type="delet"><i class="iconfont icon-tianjia"></i>清空</el-button>
            </div>
            <div class="transferBox clearfix">
                  <div class="leftbox">
                        <ul>
                          <li v-for="(item,key) in stationData" :key="key" @dblclick="stationClick(item,key)">{{item.station}}</li>
                        </ul>
                  </div>
                  <div class="buttonbox">
                       <div class="b_box">
                              <div @click="leftallChecked">
                               <i class="el-icon-arrow-right"></i>
                              </div>
                              <div @click="rightallChecked">
                                  <i class="el-icon-arrow-left"></i>
                              </div>
                       </div>
                  </div>
                  <div class="rightbox">
                    <div class="tablebox">
                      <el-table border :data="dialogTable" >
                          <el-table-column
                            type="index"
                            
                            :index="indexMethod"
                            width="50">
                          </el-table-column>
                          <el-table-column
                            prop="station"
                            label="站点名称">
                          </el-table-column>
                          <el-table-column>
                              <template slot="header" slot-scope="scope">
                                    <el-checkbox v-model="checkedCball">超标报警</el-checkbox>
                              </template>
                              <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.checkedCb"></el-checkbox>
                              </template>
                          </el-table-column>
                          <el-table-column>
                              <template slot="header" slot-scope="scope">
                                    <el-checkbox v-model="checkedGzall">故障报警</el-checkbox>
                              </template>
                              <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.checkedGz"></el-checkbox>
                              </template>
                          </el-table-column>
                          <el-table-column>
                              <template slot="header" slot-scope="scope">
                                    <el-checkbox v-model="checkedYcall">异常报警</el-checkbox>
                              </template>
                              <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.checkedYc"></el-checkbox>
                              </template>
                          </el-table-column>
                           <el-table-column label="操作">
                              <template slot-scope="scope">
                                   <div> <el-button type="secondBtn" @click="handleDelete(scope.$index, scope.row)">删除</el-button></div>
                              </template>
                          </el-table-column>
                      </el-table>
                    </div>
                  </div>
            </div>
            
       </div>
       <div slot="footer" class="dialog-footer">
          <el-button type="noticon" @click="save">保 存</el-button>
          <el-button type="noticonsecondBtn" @click="visiDialog = false">关 闭</el-button>
       </div>
    </el-dialog>
    <el-dialog :visible.sync="visiDialogadd"  width="950px" title="运维人员新增" :before-close="closess">
          <div class="dialogcontent">
               
                 
                   <div class="dialog-layout">
                    <ul class="formul">
                      <li>
                          <div style="width:100%">
                                <span class="layoutspan">单位 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:474px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">登录帐号 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">登录密码 : </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                   <el-input v-model="input"></el-input>
                                </div>
                          </div>
                      </li>
                      <li>  
                          <div>
                                <span class="layoutspan">真实姓名 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">身份证号 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">性别 : </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-select v-model="value" placeholder="请选择">
                                        <el-option
                                          v-for="item in optionDatasex"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                  </el-select>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">手机号 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">专业 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">学历 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-select v-model="value" placeholder="请选择">
                                        <el-option
                                          v-for="item in optionEduc"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                  </el-select>
                                </div>
                          </div>
                      </li>
                       <li>
                          <div>
                                <span class="layoutspan">从业开始时间 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-date-picker v-model="date" type="date" placeholder="请选择"></el-date-picker>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">是否启用 : </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                 <el-select v-model="value" placeholder="请选择">
                                        <el-option
                                          v-for="item in optionData"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                  </el-select>
                                </div>
                          </div>
                      </li>
                       <li>
                          <div>
                                <span class="layoutspan">持证证书编号 : </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">职务 : </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                      </li>
                       <li>
                          <div style="width:100%">
                                <span class="layoutspan">人员角色 : </span>&emsp;
                                <div class="layoutBox" style="width:530px;height:30px;line-height:30px">
                                      <el-radio-group v-model="radio">
                                        <el-radio :label="1">项目经理</el-radio>
                                        <el-radio :label="2">区域经理</el-radio>
                                        <el-radio :label="3">片区经理</el-radio>
                                        <el-radio :label="4">运维人员</el-radio>
                                      </el-radio-group>
                                </div>
                          </div>
                      </li>
                      <li>
                          <span class="layoutspan">资质上传 : </span>&emsp;
                                <el-upload
                                  class="upload-demo"
                                  ref="upload"
                                  action="https://jsonplaceholder.typicode.com/posts/"
                                  :on-preview="handlePreview"
                                  :on-remove="handleRemove"
                                  :file-list="fileList"
                                  :auto-upload="false">
                                  <span slot="trigger" class="upload_span_sc"><i class="icon-shangchuan1 iconfont"></i> 上传</span>
                                </el-upload>
                      </li>
                      <li>
                           <span class="layoutspan">审核资质上传 : </span>&emsp;
                                <el-upload
                                  class="upload-demo"
                                  ref="upload"
                                  action="https://jsonplaceholder.typicode.com/posts/"
                                  :on-preview="handlePreview"
                                  :on-remove="handleRemove"
                                  :file-list="fileList"
                                  :auto-upload="false">
                                  <span slot="trigger" class="upload_span_sc"><i class="icon-shangchuan1 iconfont"></i> 上传</span>
                                </el-upload>
                      </li>
                    </ul>
                  
                   </div>
                   <div class="tx_box">
                     <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
                      <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type='picture-card'
                        :limit='1'
                        :file-list="headPortrait"
                        :auto-upload="false">
                        <el-button slot="trigger">上传照片</el-button>
                      </el-upload>
                   </div>
                 
                 
          </div>
          <div slot="footer" class="dialog-footer">
                 <el-button type="noticon">保存</el-button>
                  <el-button type="noticonsecondBtn">取消</el-button>
          </div>
    </el-dialog>
    <el-dialog :visible.sync="visiDialogpreview"  width="1000px" title="我的名片" :before-close="closess">
          <div class="preview" id="myDiv">
                <div class="head">
                      <div class="tx">
                            <img src="../../assets/images/userIcon.png"/>
                      </div>
                      <div class="message">
                            <p>林道金 <span>男</span></p>
                            <p>430581198811070531</p>
                            
                      </div>
                </div>
                <ul>
                  <li></li>
                </ul>
          </div>
           <el-button type="noticon" @click="printPage">打印</el-button>
    </el-dialog>
  </div>
</template>

<script>
var treedata = [
  {
    label: "一级 1",
    id: 1,
    children: [
      {
        label: "二级 1-1",
        id: 2,
        children: [
          {
            label: "二级 1-1",
            id: 3,
            children: [
              {
                label: "二级 1-1",
                id: 4
              },
              {
                label: "二级 1-1",
                id: 5
              },
              {
                label: "二级 1-1",
                id: 6
              }
            ]
          },
          {
            label: "二级 1-1",
            id: 7,
            children: [
              {
                label: "二级 1-1",
                id: 8,
               
              },
              {
                label: "二级 1-1",
                id: 9,
              
              },
              {
                label: "二级 1-1",
                id: 10,
              
              }
            ]
          },
          {
            label: "二级 1-1",
            id: 11,
            children: [
              {
                label: "二级 1-1",
                id: 12
              },
              {
                label: "二级 1-1",
                id: 13
              },
              {
                label: "二级 1-1",
                id: 14
              }
            ]
          }
        ]
      }
    ]
  }
];
export default {
  name: "",
  data() {
    return {
      fileList:[],
      imageUrl: "",
      date: "",
      radio: "",
      visiDialog: false,
      visiDialogadd: false, //人员新增弹框
      visiDialogpreview: false, //预览弹框
      input: "",
      tableData: [{ date: "2019-03-19", person: "刘森", name: "1" }],
      stationData: [
        {
          station: "后寨",
          checkedCb: false,
          checkedGz: false,
          checkedYc: false
        },
        {
          station: "大山矿",
          checkedCb: false,
          checkedGz: false,
          checkedYc: false
        },
        {
          station: "闹德海水库",
          checkedCb: false,
          checkedGz: false,
          checkedYc: false
        },
        {
          station: "柴河水库",
          checkedCb: false,
          checkedGz: false,
          checkedYc: false
        },
        {
          station: "镇西大桥",
          checkedCb: false,
          checkedGz: false,
          checkedYc: false
        },
        {
          station: "名山",
          checkedCb: false,
          checkedGz: false,
          checkedYc: false
        },
        {
          station: "三岔口",
          checkedCb: false,
          checkedGz: false,
          checkedYc: false
        }
      ],
      dialogTable: [], //弹出框右侧表格数据
      treedata: treedata,
      treeConfig: {
        showCheckbox: false,
        defaultId:'',
        defaultText:'',
      },
      value: "",
      optionDatasex: [{ label: "男", value: 1 }, { label: "女", value: 2 }],
      optionEduc:[{ label: "本科", value: 1 }, { label: "专科", value: 2 }],
      optionData: [{ label: "是", value: 1 }, { label: "否", value: 2 }],
      headPortrait:[]
    };
  },
  created() {
    this.$store.commit("setShowlefttree", false);
  },
  computed: {
    checkedCball: {
      get: function() {
        var bool = false;
        for (let i in this.dialogTable) {
          if (this.dialogTable[i].checkedCb == false) {
            bool = false;
            break;
          } else {
            bool = true;
          }
        }
        return bool;
      },
      set: function(newValue) {
        for (let i in this.dialogTable) {
          this.dialogTable[i].checkedCb = newValue;
        }
      }
    },
    checkedGzall: {
      get: function() {
        var bool = false;
        for (let i in this.dialogTable) {
          if (this.dialogTable[i].checkedGz == false) {
            bool = false;
            break;
          } else {
            bool = true;
          }
        }
        return bool;
      },
      set: function(newValue) {
        for (let i in this.dialogTable) {
          this.dialogTable[i].checkedGz = newValue;
        }
      }
    },
    checkedYcall: {
      get: function() {
        var bool = false;
        for (let i in this.dialogTable) {
          if (this.dialogTable[i].checkedYc == false) {
            bool = false;
            break;
          } else {
            bool = true;
          }
        }
        return bool;
      },
      set: function(newValue) {
        for (let i in this.dialogTable) {
          this.dialogTable[i].checkedYc = newValue;
        }
      }
    }
  },
  methods: {
    //预览
    previewPage(){
        this.visiDialogpreview=true;
    },  
    //打印
    printPage(){
      var newstr = document.getElementById('myDiv').innerHTML;
      var f = document.getElementById('printf'); 
      var bodyhtml="<html><head><style>ul{list-style-type: none;}</style></head><body>"+newstr+"</body></html>"
      if (f) {
        document.getElementById("print_content").removeChild(f);
      }
      var iframe = document.createElement('iframe');
      iframe.id = 'printf';
      iframe.style.width = '0';
      iframe.style.height = '0';
      iframe.style.border = "none";
      iframe.style.display = "none";
      document.getElementById("print_content").appendChild(iframe);
      setTimeout(() => {
          iframe.contentDocument.write(bodyhtml);
          iframe.contentDocument.close();
          iframe.contentWindow.focus(); 
          iframe.contentWindow.print();
      }, 100)
          
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleAvatarSuccess(file, fileList) {
       this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isLt5M;
    },
    indexMethod(index) {
      return index + 1;
    },
    search() {
      
    },
    closess(done) {
      done();
    },
    //左侧站点点击
    stationClick(item, key) {
      this.stationData.splice(key, 1);
      this.dialogTable.push(item);
    },
    //全选左侧站点
    leftallChecked() {
      for (let i in this.stationData) {
        this.dialogTable.push(this.stationData[i]);
      }
      this.stationData = [];
    },
    //全选右侧站点
    rightallChecked() {
      for (let i in this.dialogTable) {
        this.dialogTable[i].checkedCb = false;
        this.dialogTable[i].checkedGz = false;
        this.dialogTable[i].checkedYc = false;
        this.stationData.push(this.dialogTable[i]);
      }
      this.dialogTable = [];
    },
    //表格内删除
    handleDelete(index, obj) {
      this.dialogTable.splice(index, 1);
      obj.checkedCb = false;
      obj.checkedGz = false;
      obj.checkedYc = false;
      this.stationData.push(obj);
    },
    save() {}
  }
};
</script>

<style scoped lang="less">
.dialogcontent {
  position: relative;
 
  .dialog-layout {
    width: 700px;
    
    .layoutspan {
      width: 92px;
    }
  }
  .tx_box{
    width: 148px;
    height: 230px;
    position: absolute;
    right: 70px;
    top: 40px;
  }
  .layoutspan{
    width: 92px;
  }
}
.transferBox {
  > div {
    float: left;
  }
  .leftbox {
    width: 200px;
    height: 380px;
    border: 1px solid #d6e3f2;
    li {
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      &:hover {
        background: #166bce;
        color: #fff;
      }
    }
  }
  .buttonbox {
    width: 40px;
    height: 380px;
    position: relative;
    .b_box {
      width: 30px;
      height: 70px;
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-35px);
      > div {
        height: 30px;
        width: 30px;
        text-align: center;
        cursor: pointer;
        line-height: 30px;
        border: 1px solid #d6e3f2;
        border-radius: 50%;
        margin-bottom: 10px;
        i {
          font-size: 20px;
        }
      }
    }
  }
  .rightbox {
    width: calc(100% - 240px);
    .tablebox {
      // height: 349px;
      // border: 1px solid #d6e3f2;
    }
  }
}
.preview{
  .head{
      padding-left: 138px;
       height: 138px;
      position: relative;
      .tx{
        width: 138px;
        height: 138px;
        position: absolute;
        left: 0px;
        top: 0px;
        img{
          width: 138px;
          height: 138px;
        }
      }
  }
  ul{
   list-style-type: none;
  }
}
</style>
